<template>
  <div class="sky">
    <i class="fa fa-motorcycle"></i>
  </div>
  <div class="ground"></div>
  <div>
    <v-typical class="blink" :steps="['Hello', 1000, 'Hello World !', 600, 'Hello World ! 👋', 1000]" :loop="Infinity"
      :wrapper="'h2'"></v-typical>
  </div>

  <!-- <span style='font-size:100px;'>&#128518;</span>
  <span style="font-size:50px">&#128056;</span> -->
  <!-- <div id="pretty" onload="create()" onclick="clickfun(event)" onmousemove="move(event)">
    <canvas id="canvas" width="800" height="800"></canvas>
    <span id="score"></span>
  </div>
  <div class="box" :value="gasp_">{{gasp_}}</div> -->
  <div class="task">
    <el-button type="primary" @click="show()"> event loop</el-button>
    <img v-if="isShow" :src="task" alt="Event loop">
  </div>
  <div class="chapter" v-for="item in chapter" ref="chapter">
    <!-- ref 写在标签上时：this.$refs.名字  获取的是标签对应的dom元素
     ref 写在组件上时：这时候获取到的是 子组件（比如counter）的引用 -->
    <div class="list" :data-index="item.id">
      {{ item.chapter_name }}
    </div>
    <!-- <div class="main" :data-content = 'item.chapter_name'>{{item.chapter_main}}</div> -->
  </div>
</template>

<script>
import VTypical from 'vue-typical';
import gsap from 'gsap';
import axios from 'axios'
export default {
  name: "DH",
  components: {
    VTypical
  },
  data() {
    // data函数返回
    return {
      isShow: false,
      gasp_: '2d动画',
      names: ["abc", "cba", "nba", "why", "lilei", "hmm", "kobe", "james"],
      keyword: "",
      task: 'https://img-blog.csdnimg.cn/20210524200544978.png?…3dlaXhpbl80NDk3MjAwOA==,size_16,color_FFFFFF,t_70',
      chapter: []
    }
  },
  computed: {
    showNames() {
      return this.names.filter(item => item.indexOf(this.keyword) !== -1)
    },

  },
  created() {
    // 异步请求渲染的元素无法在mounted阶段拿到，解决方法可在update阶段获取
    axios.get(`http://localhost:3000/chapter`).then(response => {
      // console.log((response.data.data).length);
      this.chapter.push(...response.data.data)
      console.log(this.chapter);
    }).catch(error => {
      console.log(error)
    })


  },

  mounted() {
    this.$nextTick(() => {
      console.log(444);
      console.log(this.$refs['chapter']);
    });
    function sum() {
      var num = arguments[0];
      if (arguments.length == 1) {
        return num
      } else {
        var num = 0;
        for (var i = 0; i < arguments.length; i++) {
          num = num + arguments[i];
        }
        return num;
      }
    }
    console.log(sum(2)(5));
    console.log(sum(5));
    var last_cx = 10;
    var last_cy = 10;
    var flag = 0;
    var mapp = new Array();
    var bomb_map = new Array();
    var score = 0;
    function clickfun(event) {
      var cx = Math.floor(event.clientX / 100);
      var cy = Math.floor(event.clientY / 100);
      if (cx > 7 || cy > 7) {
        console.log(mapp);
        /*for (var i = 0; i < 8; i++) {
          for (var j = 0; j < 8; j++) {
            mapp[i][j] = 0;
          }
        }
        full_ball();*/
        return;
      }
      if (last_cx == cx && last_cy == cy && flag == 1) {
        flag = 0;
        clear_box(cx, cy);
        return;
      }
      if (flag == 0) {
        last_cx = cx;
        last_cy = cy;
        flag = 1;
        draw_box(cx, cy);
        return;
      }
      if (flag == 1) {
        if (Math.abs(cx - last_cx) > 1 || Math.abs(cy - last_cy) > 1) {
          clear_box(last_cx, last_cy);
          draw_box(cx, cy);
          last_cx = cx;
          last_cy = cy;
          return;
        }
        var temp = mapp[last_cx][last_cy];
        mapp[last_cx][last_cy] = mapp[cx][cy];
        mapp[cx][cy] = temp;
        clear_box(last_cx, last_cy);
        draw_ball(cx, cy, mapp[cx][cy]);
        draw_ball(last_cx, last_cy, mapp[last_cx][last_cy]);
        checkall();
        slide_down_all();
        //full_ball();
        setTimeout(full_ball, 500);
        flag = 0;
        return;
      }
    }
    function move(event) {
      document.getElementById("xx").innerHTML = event.clientX;
      document.getElementById("yy").innerHTML = event.clientY;

    }
    function create() {
      for (var i = 0; i < 8; i++) {
        mapp[i] = new Array();
        bomb_map[i] = new Array();
        for (var j = 0; j < 8; j++) {
          //mapp[i][j]=Math.floor(Math.random()*5+1);
          mapp[i][j] = 0;
          bomb_map[i][j] = 0;
        }
      }

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');

      /*for (var i = 0; i < 8 ; i++) {
        ctx.moveTo(100*i,0)
        ctx.lineTo(100*i,800)
        ctx.moveTo(0,100*i)
        ctx.lineTo(800,100*i)
      }
      ctx.stroke()*/

      /*for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          draw_ball(i,j,mapp[i][j]);
        }
      }*/
      full_ball();
      score = 0;
    }
    function draw_ball(x, y, color) {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');
      var draw_x = Math.round(x * 100 + 10);
      var draw_y = Math.round(y * 100 + 10);
      if (color == 0) {
        return;
      }
      else if (color == 1) {
        ctx.fillStyle = 'red';
      }
      else if (color == 2) {
        ctx.fillStyle = 'orange';
      }
      else if (color == 3) {
        ctx.fillStyle = 'lime'
      }
      else if (color == 4) {
        ctx.fillStyle = 'dodgerblue'
      }
      else if (color == 5) {
        ctx.fillStyle = 'violet'
      }
      else if (color == -1) {
        ctx.fillStyle = 'white'
      }
      var radius = 20;
      ctx.beginPath();
      ctx.arc(draw_x + 20, draw_y + 20, 20, Math.PI, Math.PI + Math.PI / 2, false)
      ctx.arc(draw_x + 60, draw_y + 20, 20, Math.PI + Math.PI / 2, 0, false)
      ctx.arc(draw_x + 60, draw_y + 60, 20, 0, Math.PI / 2, false)
      ctx.arc(draw_x + 20, draw_y + 60, 20, Math.PI / 2, Math.PI, false)
      ctx.closePath();
      //ctx.stroke();
      ctx.fill();
    }
    function clear_ball(x, y) {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');
      var draw_x = Math.round(x * 100 + 5);
      var draw_y = Math.round(y * 100 + 5);
      ctx.clearRect(draw_x, draw_y, 90, 90);
    }
    function heng(i, j) {
      if (mapp[i][j] == 0) {
        return;
      }
      var num = 1;
      for (var k = 1; j - k >= 0; k++) {
        if (mapp[i][j] == mapp[i][j - k]) {
          num++;
        }
        else {
          break;
        }
      }
      for (var k = 1; j + k < 8; k++) {
        if (mapp[i][j] == mapp[i][j + k]) {
          num++;
        }
        else {
          break;
        }
      }
      if (num < 3) {
        return;
      }
      bomb_map[i][j] = 1;
      for (var k = 1; j - k >= 0; k++) {
        if (mapp[i][j] == mapp[i][j - k]) {
          bomb_map[i][j - k] = 1;
        }
        else {
          break;
        }
      }
      for (var k = 1; j + k < 8; k++) {
        if (mapp[i][j] == mapp[i][j + k]) {
          bomb_map[i][j + k] = 1;
        }
        else {
          break;
        }
      }
    }
    function su(i, j) {
      if (mapp[i][j] == 0) {
        return;
      }
      var num = 1;
      for (var k = 1; i - k >= 0; k++) {
        if (mapp[i][j] == mapp[i - k][j]) {
          num++;
        }
        else {
          break;
        }
      }
      for (var k = 1; i + k < 8; k++) {
        if (mapp[i][j] == mapp[i + k][j]) {
          num++;
        }
        else {
          break;
        }
      }
      if (num < 3) {
        return;
      }
      bomb_map[i][j] = 1;
      for (var k = 0; i - k >= 0; k++) {
        if (mapp[i][j] == mapp[i - k][j]) {
          bomb_map[i - k][j] = 1;
        }
        else {
          break;
        }
      }
      for (var k = 0; i + k < 8; k++) {
        if (mapp[i][j] == mapp[i + k][j]) {
          bomb_map[i + k][j] = 1;
        }
        else {
          break;
        }
      }
    }
    function checkall() {
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          bomb_map[i][j] = 0;
        }
      }
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          heng(i, j);
          su(i, j);
        }
      }
      //console.log(mapp)
      var flag = false;
      for (var i = 0; i < 8; i++) {
        for (var j = 0; j < 8; j++) {
          if (bomb_map[i][j] == 1) {
            clear_ball(i, j);
            score += 1;
            mapp[i][j] = 0;
            flag = true;
          }
        }
      }
      //slide_down_all();
      document.getElementById("score").innerHTML = score;
      return flag;
    }
    function bomb_ball(x, y) {

    }
    function draw_box(x, y) {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');
      var draw_x = x * 100 + 10;
      var draw_y = y * 100 + 10;
      var radius = 20;
      ctx.beginPath();
      ctx.arc(draw_x + 20, draw_y + 20, 20, Math.PI, Math.PI + Math.PI / 2, false);
      ctx.arc(draw_x + 60, draw_y + 20, 20, Math.PI + Math.PI / 2, 0, false);
      ctx.arc(draw_x + 60, draw_y + 60, 20, 0, Math.PI / 2, false);
      ctx.arc(draw_x + 20, draw_y + 60, 20, Math.PI / 2, Math.PI, false);
      ctx.closePath();
      ctx.strokeStyle = 'black';
      ctx.lineWidth = 3;
      ctx.stroke();
    }
    function clear_box(x, y) {
      clear_ball(x, y);
      draw_ball(x, y, mapp[x][y]);
    }

    function show_animation(sx, sy, flag) {
      if (flag == 1) {
        clear_ball(sx, sy);
        draw_ball(sx, sy + 0.5, mapp[sx][sy]);
        clear_ball(sx, sy + 0.5);
        draw_ball(sx, sy + 1)
      }
      else if (flag == 2) {
        /*clear_ball(sx,sy);
        clear_ball(sx,sy+1);
        draw_ball(sx,sy+1,mapp[sx][sy]);
        draw_ball(sx,sy,mapp[sx][sy+1]);*/
        var temp = mapp[sx][sy + 1];
        mapp[sx][sy + 1] = mapp[sx][sy];
        mapp[sx][sy] = temp;
        var p = frame_2([sx, sy, 0.1]);
        //.then(frame_2)
        // .then(frame_3)
        // .then(frame_4);
      }
    }
    function frame_1(sx, sy) {
      return new Promise(function (resolve, reject) {
        //console.log("in frame1...");
        clear_ball(sx, sy);
        clear_ball(sx, sy + 1);
        //draw_ball(sx,sy+1,mapp[sx][sy]);
        //draw_ball(sx,sy,mapp[sx][sy+1]);
        var temp = mapp[sx][sy + 1];
        mapp[sx][sy + 1] = mapp[sx][sy];
        mapp[sx][sy] = temp;
        setTimeout(resolve, 100, [sx, sy, 0.1]);
      });
    }
    function frame_2([sx, sy, offset]) {
      return new Promise(function (resolve, reject) {
        //console.log("in frame2...");
        clear_ball(sx, sy + offset - 0.1);
        //draw_ball(sx,sy+offset-0.1,-1);
        draw_ball(sx, sy + offset, mapp[sx][sy + 1]);
        //setTimeout(resolve,100,[sx,sy]);
        if (offset < 0.9) {
          setTimeout(frame_2, 1, [sx, sy, offset + 0.1]);
          //frame_2([sx,sy,offset+0.1]);
        }
        else {
          slide_down_one(sx, sy + 1);
        }
      });
    }
    function frame_3([sx, sy]) {
      return new Promise(function (resolve, reject) {
        //console.log("in frame3...");
        //clear_ball(sx,sy+0.5);
        draw_ball(sx, sy + 0.5, -1);
        //draw_line(sx,sy);
        setTimeout(resolve, 100, [sx, sy]);
      });
    }
    function frame_4([sx, sy]) {
      return new Promise(function (resolve, reject) {
        //console.log("in frame4...");
        //console.log(sx);
        //console.log(sy);
        //clear_ball(sx,sy+0.5);
        draw_ball(sx, sy + 0.5, -1);
        draw_ball(sx, sy, mapp[sx][sy]);
        draw_ball(sx, sy + 1, mapp[sx][sy + 1]);
      });
    }
    function draw_line(sx, sy) {
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext('2d');
      ctx.moveTo(sx * 100, sy * 100);
      ctx.lineTo((sx + 1) * 100, sy * 100);
      ctx.lineTo(sx * 100, (sy + 1) * 100);
      ctx.moveTo((sx + 1) * 100, (sy + 1) * 100);
      ctx.lineTo((sx + 1) * 100, sy * 100);
      ctx.lineTo(sx * 100, (sy + 1) * 100);
      ctx.lineWidth = 2;
      ctx.stroke();
    }
    function slide_down_one(x, y) {
      if (y > 6) {
        return;
      }
      if (mapp[x][y + 1] == 0) {
        //setTimeout(show_animation,250,x,y,2);
        show_animation(x, y, 2);
        //slide_down_one(x,y+1);
        //setTimeout(slide_down_one,1000+(9-x)*10,x,y+1);
      }
    }
    function slide_down_all() {
      for (var x = 7; x >= 0; x--) {
        for (var y = 7; y >= 0; y--) {
          if (mapp[x][y] != 0) {
            //slide_down_one(x,y);
            setTimeout(slide_down_one, 100 + (9 - x) * 10, x, y);
          }
        }
      }
    }
    var temp_flag = 0;
    function full_ball() {
      console.log("in full_ball function ...");
      var flag = false;
      for (var x = 0; x <= 7; x++) {
        if (mapp[x][0] == 0) {
          flag = true;
          mapp[x][0] = Math.floor(Math.random() * 5 + 1);
          draw_ball(x, 0, mapp[x][0]);
          //slide_down_one(x,0,500);
          setTimeout(slide_down_one, (9 - x) * 10, x, 0);

        }
      }
      if (flag) {
        setTimeout(full_ball, 500);
      }

      // 以下函数可能会导致动画抖动
      if (checkall()) {
        slide_down_all();  //在滑块正在下滑的过程中触发这个函数会导致动画抖动
        if (!flag) {
          setTimeout(full_ball, 500);
        }
      }

      /*if (temp_flag < 7) {
        temp_flag += 1;
        setTimeout(full_ball,500);
      }*/
    }

  },
  updated() {
    this.$nextTick(() => {
      console.log(555);
      console.log(this.$refs['chapter']);
    });
    
    
  },
  methods: {
    getter_() {
      this.$nextTick(function () {
        console.log('duck')
      })
    },


    show() {
      this.isShow = !this.isShow;
      console.log('切换');
    },

    go() {
      window.location.href = 'http://www.baidu.com'
      setTimeout(function () {
        window.open('http://taobao.com', '_blank')
      }, 1000)
    },
    enter(el, done) {
      gsap.to(el, {
        background: 'LavenderBlush',
        onComplete: done

      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.5,
        onComplete: done
      })
    },



  }
}
</script>

<style scoped lang="scss">
body {
  margin: 0;
}

.fa-motorcycle {
  color: #333;
  font-size: 50px;
  line-height: 30px;
  margin-top: 68px;
  margin-left: 20px;
  // position: relative;
  // left: 600px;
  // transition: all 3s;
}

.sky {
  background-color: #adf;
  height: 100px;
}

.ground {
  background-color: #778;
  width: 100%;
  height: 30px;
}

.header {
  // width: 100px;
  // height: 100px;
  // background: 	#0000CD;
  border: 4px solid;
  border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
  // text-shadow: 0 0 5px #fff,
  //            0 0 10px #fff,
  //            0 0 15px #fff,
  //            0 0 20px #00a67c,
  //            0 0 35px #00a67c,
  //            0 0 40px #00a67c,
  //            0 0 50px #00a67c,
  //            0 0 75px #00a67c;
}

#diamond {
  margin: 100px;

  .t {
    //直接定义了高度免去了清除浮动
    height: 30px;
  }

  .common {
    // 公共样式
    position: relative;
    float: left;
    width: 0;
    height: 0;
    border-style: solid; // 元素本身做大三角形，衬底成为小三角形的边框

    &:after {
      // 伪元素定义小三角形
      content: '';
      position: absolute;
      border-style: solid;
    }
  }

  div.top {
    // 钻石顶部的5个三角形特定样式
    border-width: 0 30px 30px; // 三角形大小
    border-color: transparent transparent #fff; // 三角形颜色

    &:after {
      // 小三角形
      top: 1px; // 移动三角形使之盖在底部的大的三角形
      left: -28px;
      border-width: 0 28px 28px; // 小三角形的大小定义
      border-color: transparent transparent red;
    }

    &:nth-child(2n) {
      // 第二个第四个三角形倒立。
      transform: rotate(180deg);
    }

    &:nth-child(n+2) {
      // 从第二个开始都向左移动30px
      margin-left: -30px;
    }
  }
}

// 上部分的样式省略了
div.bottom {
  border-width: 90px 30px 0 30px; // 高度适当的高点，这里给了90px
  border-color: #fff transparent transparent; // 三角形向下，底色白色

  &:after {
    // 同上，做出内部红色的小三角形，尺寸稍小，漏出白色的“边框线”
    border-width: 88px 28px 0 28px;
    border-color: #f00 transparent transparent;
    top: -89px;
    left: -28px;
  }

  /*
     *   到这应该是三个等腰三角形
     *   第一个第三个三角形应该要是钝角三角形的。
     *   所以要进行一下倾斜操作
     */

  &.bottom1 {
    // 底部第一个三角形倾斜转换
    transform: skew(33.5deg);
    transform-origin: 100% 0;
  }

  &.bottom3 {
    // 底部第三个三角形倾斜转换，与第一个对称
    transform: skew(-33.5deg);
    transform-origin: 100% 0;
  }
}

.pretty {
  border: 10px solid sandybrown;
}

canvas {
  border: 20px dashed chocolate;
  box-sizing: border-box;
}

// .box{
//   padding: 0.25rem;
//   background: lightgreen;
//   width: 3rem;
//   height: 3rem;
//   margin-right: 0.25rem;
//   position: absolute;
//   top: 0;
// }
.chapter {
  background: url('https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE4wE9C?ver=6a45') no-repeat center;
  background-size: 100% 100%;
  color: purple;
  text-shadow: 0px 0px 7px #fff, 1px 1px 3px #ccc, 2px 2px 2px darkslategrey;
}

.task {
  width: 70%;
  display: flex;

  img {
    display: block;
    width: 100%;
  }
}

.f {
  height: 46px;
  width: 500px;
  overflow-x: hidden;
  overflow-y: scroll;
  border: 1px solid chocolate;

  &::-webkit-scrollbar {
    display: none
  }

  .s {
    height: 188px;
    width: 100%;

    background: cadetblue;
  }
}
</style>



